<!--
 * @Author: muuzi@163.com muuzi@163.com
 * @Date: 2025-01-01 17:43:41
 * @LastEditors: muuzi@163.com muuzi@163.com
 * @LastEditTime: 2025-01-01 17:43:45
 * @FilePath: /mp-wechat/src/pages/menu/component/CartDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <up-popup
    mode="bottom"
    @close="closeCartPopup"
    :show="cartPopupVisible"
    class="cart-popup"
  >
    <view class="top">
      <u-text
        @tap="handleCartClear"
        color="#fff"
        text="清空"
        align="right"
      ></u-text>
    </view>
    <scroll-view class="cart-list" scroll-y>
      <view class="wrapper">
        <view class="item" v-for="(item, index) in 10" :key="index">
          <view class="left">
            <view class="name">{{ item.name || "珍珠奶茶" }}</view>
            <view class="props">{{ item.props_text || "标准冰" }}</view>
          </view>
          <view class="center">
            <text>￥{{ item.price || "12.00" }}</text>
          </view>
          <view class="right">
            <up-icon @tap="handleCartItemReduce(index)" name="minus-circle" size="20" color="#999"></up-icon>
            <view class="number">{{ item.number || 1 }}</view>
            <up-icon
              name="plus-circle-fill"
              size="20" @tap="handleCartItemAdd(index)"
              color="#f0ad4e"
            ></up-icon>
          </view>
        </view>
        <view class="item" v-if="orderType == 'takeout'">
          <view class="left">
            <view class="name">包装费</view>
          </view>
          <view class="center">
            <text>￥12.00</text>
          </view>
          <view class="right invisible">
            <view
              plain
              size="mini"
              class="btn no-active-btn"
              hover-class="none"
            >
              <view class="iconfont iconsami-select"></view>
            </view>
            <view class="number">1</view>
            <view class="btn active-btn" size="min" hover-class="none">
              <view class="iconfont iconadd-select"></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </up-popup>
</template>
<script lang="ts" setup>

const props = defineProps(["cartPopupVisible", "orderType"]);
const emit = defineEmits(["closeCartPopup"]);
const closeCartPopup = () => {
  emit("closeCartPopup");
};
</script>
<style lang="scss" scoped>
.cart-popup {
  .top {
    background-color: $uni-color-warning;
    color: $uni-color-warning;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    text-align: right;
  }

  .cart-list {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    min-height: 1vh;
    max-height: 60vh;

    .wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 30rpx;
      margin-bottom: 156rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        position: relative;

        &::after {
          content: " ";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: $uni-border-color;
          height: 2rpx;
          transform: scaleY(0.6);
        }

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          margin-right: 30rpx;

          .name {
            font-size: $uni-font-size-sm;
            //	color: $uni-text-color-base;
          }

          .props {
            //	color: $uni-text-color-assist;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .center {
          margin-right: 120rpx;
          //font-size: $uni-font-size-base;
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btn {
            width: 46rpx;
            height: 46rpx;
            border-radius: 100%;
            padding: 0;
            text-align: center;
            line-height: 46rpx;
          }

          .active-btn {
            background: #f0ad4e;
          }

          .no-active-btn {
            border: 2rpx solid #ddd;
          }

          .number {
            //font-size: $uni-font-size-base;
            width: 46rpx;
            height: 46rpx;
            text-align: center;
            line-height: 46rpx;
          }
        }
      }
    }
  }
}
</style>